<!--
 * 验证码输入框
 * @作者: 陈老师儿~
 * @手机: 18560000860
 -->
<template>
    <view class="pure-code-input" :class="classes" :style="styles">
        <view class="pure-code-input-box" v-for="_index in numberCount" :key="_index" :class="computedBoxClasses(_index - 1)">
            <text class="pure-code-input-text">{{ computedBoxText(_index - 1) }}</text>
        </view>
        <!-- 快手小程序 focus 不支持通过 props 设置 -->
        <!-- #ifndef MP-KUAISHOU -->
        <input class="pure-code-input-input" :focus="focus" v-model="code" :maxlength="numberCount" />
        <!-- #endif -->

        <!-- #ifdef MP-KUAISHOU -->
        <input class="pure-code-input-input" :focus="isFocus" v-model="code" :maxlength="numberCount" />
        <!-- #endif -->
    </view>
</template>

<script>
    import props from "./props.js";
    export default {
        options: {
            // 将自定义节点设置成虚拟的
            // 头条、飞书：因为合并后丢失事件和 'provide/inject'
            // 京东：因为合并后不能合并外层 'class'
            // 百度：因为合并后会在控制台疯狂报警告
            // #ifndef MP-TOUTIAO || MP-LARK || MP-JD || MP-BAIDU
            virtualHost: true,
            // #endif

            // 组件样式隔离
            styleIsolation: "apply-shared",

            // 允许使用多个插槽
            multipleSlots: true,
        },
        props: props,
        emits: ["complete", "change"],
        data() {
            return {
                // 输入的验证码值
                code: "",
                isFocus: false,
            };
        },
        computed: {
            // classes
            classes() {
                const classes = [];
                return classes;
            },

            // styles
            styles() {
                const styles = [];
                return styles;
            },

            // 数字长度
            numberCount() {
                return Number(this.count);
            },
        },
        watch: {
            code(val, oldVal) {
                // 输入完成
                if (val.length === this.numberCount) {
                    this.$emit("complete", val);
                }

                // 输入变化
                if (val !== oldVal) {
                    this.$emit("change", val);
                }
            },
        },
        methods: {
            // 单个字符
            computedBoxText(index) {
                return this.code.charAt(index);
            },

            // 盒子class
            computedBoxClasses(index) {
                const classes = [];

                // 当前字符
                const text = this.computedBoxText(index);

                // 已输入的长度
                const length = this.code.length;

                // 是否需要聚焦
                // 填完了
                if (length === this.numberCount) {
                    // 聚焦最后一个
                    if (index === length - 1) classes.push("pure-code-input-box-focus");
                }
                // 没填完
                else {
                    // 聚焦待输入的
                    if (index === length) classes.push("pure-code-input-box-focus");
                }

                // 是否需要光标闪烁
                if (index === length && text === "") classes.push("pure-code-input-box-blink");

                return classes;
            },

            // 获取输入的值
            getCode() {
                return this.code;
            },

            // 设置输入的值
            setCode(code) {
                this.code = code;
            },

            // 聚焦
            // 为了兼容快手小程序
            setFocus() {
                this.isFocus = true;
            },
        },
        expose: ["getCode", "setCode", "setFocus"],
    };
</script>

<style scoped>
    @import "./style.css";
</style>
